<template>
  <uni-popup ref="messageDialog" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.2)" type="dialog">
    <view class="message-dialog">
      <view class="message-dialog__body">
        {{ msg }}
      </view>
      <view class="dialog-footer flex flex-row">
        <d-button class="close-btn" @click="cancel" type="info" text>{{ confirmBtn || '手滑了!'}}</d-button>
        <d-button class="confirm-btn" @click="confirm" text>{{ confirmBtn || '确 认'}}</d-button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import {GMessageEmits, GMessageProps} from "@/components/GMessage/gMessage";

defineOptions({ name: 'GMessage' })

const messageDialog = ref();

const props = defineProps(GMessageProps)
const $emits = defineEmits(GMessageEmits)

function confirm() {
  $emits('confirm')
}

function cancel() {
  $emits('cancel')
  messageDialog.value.close()
}

function close() {
  messageDialog.value.close()
}

function open() {
  messageDialog.value.open()
}

defineExpose({
  close,
  open,
})
</script>

<style scoped lang="scss">
.message-dialog {
  margin: 0 auto;
  width: 80vw;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

  &__body {
    padding: 40rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: 700;

    .message-dialog-form {
      padding: 0 20rpx;
    }

    .captcha-image {
      width: 100%;
      aspect-ratio: 3/1;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}

.dialog-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.close-btn {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  color: #000 !important;
  font-weight: 700;
  border-radius: unset;
  width: 50%;
  box-sizing: border-box;
}

.confirm-btn {
  font-weight: 700;
  width: 50%;
}
</style>
